<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;background-color: #12205B"
      :cell-style="tableCellStyle"
      max-height="500">
      <el-table-column
        prop="company"
        label="企业名称"
        width="250">
      </el-table-column>
      <el-table-column
        prop="cases"
        label="案件数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="accident"
        label="事故率"
        width="120">
      </el-table-column>
      <el-table-column
        prop="pay"
        label="支出额"
        width="200">
      </el-table-column>
      <el-table-column
        prop="incrDecr"
        label="案件增减"
        width="120">
      </el-table-column>
      <el-table-column
        prop="rank"
        label="伤残等级"
        width="120">
      </el-table-column>
      <el-table-column
        prop="rate"
        label="支缴比"
        width="120">
      </el-table-column>
      <el-table-column
        prop="total"
        label="总分"
        width="70">
      </el-table-column>
      <el-table-column
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click="goDetails"
            type="primary"
            size="small">
            督办
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="1000px"
      :modal="false"
      :show-close="false"
      :visible.sync="isShow"
      customClass="dialogBox"
      style="margin-top: 100px;"
      @open="open()"
      ref="asd"
    >
      <dv-border-box-10 title="督办详情" style="width: 1010px;height: 370px;margin-left: -25px;margin-top: -60px">
        <div style="width: 990px;height: 380px;position: absolute;z-index: 2;top: 10px;left: 10px;color: #ffffff;">
          <el-descriptions title="浙江天翼科技有限责任公司" :column="1" border
                           style="color: #FFF;font-size: 20px;background: transparent;margin-top: 10px;float: left;width: 600px">
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                负责人
              </template>
              李三华
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              18109876754
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                所属行业
              </template>
              互联网
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                预警指数
              </template>
              <span style="color: red;font-weight: 600"> 71(红色预警)</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                企业地址
              </template>
              浙江省金华市吴中区吴中大道 1188 号
            </el-descriptions-item>
          </el-descriptions>
          <el-button type="danger"
                     style="float: right;font-size: 14px;font-weight: 600;margin-top: 10px;margin-right: 17px;transform: skewX(-35deg);">
            <div style="transform: skewX(35deg);">确认督办</div>
          </el-button>
          <div style="height: 300px;width: 390px;float: left;" id="id_radar"></div>
        </div>
      </dv-border-box-10>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "_echarts@4.9.0@echarts";
import axios from "_axios@0.25.0@axios";
import api from "@/api/gs";

export default {
  data() {
    return {
      isShow: false,
      tableData: [],
      tableData2: {},
    }
  },
  mounted() {
    this.init();

  },
  methods: {
    // 弹框数据初始化
    open() {
      this.$nextTick(() => {

      })
    },
    goDetails() {
      this.isShow = true;
      this.initLeda();
    },
    initLeda() {
      this.$nextTick(() => {
        const myChart = echarts.init(document.getElementById("id_radar"));
        const option = {
          tooltip: {},
          radar: {
            radius: "70%",
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: "#fff",
                opacity: 0.2,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#fff",
                opacity: 0.2,
              },
            },
            splitArea: {
              areaStyle: {
                color: "rgba(127,95,132,.3)",
                opacity: 1,
                shadowBlur: 45,
                shadowColor: "rgba(0,0,0,.5)",
                shadowOffsetX: 0,
                shadowOffsetY: 15,
              },
            },
            indicator: [
              {
                name: "案件数",
                max: 6000,
              },
              {
                name: "事故率",
                max: 16000,
              },
              {
                name: "案件增减",
                max: 30000,
              },
              {
                name: "伤残等级",
                max: 35000,
              },
              {
                name: "支出额",
                max: 50000,
              },
              {
                name: "支缴比",
                max: 25000,
              },
            ],
          },
          series: [
            {
              name: "",
              type: "radar",
              symbolSize: 0,
              areaStyle: {
                normal: {
                  shadowBlur: 13,
                  shadowColor: "rgba(0,0,0,.2)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 10,
                  opacity: 1,
                },
              },
              data: [
                {
                  value: [5000, 7000, 12000, 11000, 15000, 14000],
                  name: "预警指数具体分布",
                }
              ],
            },
          ],
          color: ["#ef4b4c", "#b1eadb"]
        };
        option && myChart.setOption(option);
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    init() {
      for (let i = 0; i < 10; i++) {
        console.log(1)
        this.tableData[this.tableData.length] = {
          company: '浙江天翼科技有限责任公司',
          cases: '200件(' + (20 - i) + '分)',
          accident: '25%(15分)',
          pay: '2000万元(11分)',
          incrDecr: '+30件(10分)',
          rank: '二级(10分)',
          rate: '1.1(5分)',
          score: 71 - 5 * i,
          total: (71 - 5 * i) + '分',
        }
        this.tableData2 = {
          company: '浙江天翼科技有限责任公司',
          cases: '200件',
          accident: '25%',
          pay: '2000万元',
          incrDecr: '+30件',
          rank: '二级',
          rate: '0.7',
        }
      }
    },
    tableCellStyle({row, columnIndex}) {
      if (columnIndex == 7) {
        return row.score > 60 ? 'color:red;' : (row.score > 50 ? 'color:orange;' : (row.score > 0 ? 'color:blue;' : 'color:green;'));
      } else {
        return '';
      }
    }
  }
}
</script>
<style>
/*修改table 的背景颜色和文字颜色*/
.el-table td, .el-table th.is-leaf, .el-table--border, .el-table--group {
  /*border-color: black;*/
  /*background-color: black;*/
  background-color: #12205B;
  color: white;
}

/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
.el-table tbody tr:hover > td {
  background-color: black !important;
  color: #FBD533;
}

.el-descriptions__body {
  background: transparent !important;
  color: #ffffff;
}

.el-descriptions-item__label.is-bordered-label {
  background: transparent !important;
  color: #ffffff;
}

.el-descriptions__title {
  font-size: 20px;
}

.dialogBox {
  height: 370px;
  background: url("../assets/bg08.jpg");
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
